@import "./app.vars";

// Normalize
// --------------------------------------------------
@import "../../themes/normalize";


// Util
// --------------------------------------------------
@import "../../themes/util";


// App Structure
// --------------------------------------------------

* {
  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  width: 100%;
  height: 100%;

  text-size-adjust: 100%;
}

body {
  @include font-smoothing();
  @include margin(0);
  @include padding(0);

  position: fixed;
  overflow: hidden;

  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;

  text-rendering: optimizeLegibility;

  -webkit-user-drag: none;

  -ms-content-zooming: none;
  touch-action: manipulation;

  word-wrap: break-word;

  overscroll-behavior-y: contain;

  text-size-adjust: none;
  user-select: none;
}


// App Typography
// --------------------------------------------------

a {
  background-color: transparent;
}

.enable-hover a:not(.button):hover {
  opacity: .7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @include margin(16px, null, 10px, null);

  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
}

h1 {
  @include margin(20px, null, null, null);

  font-size: $h1-font-size;
}

h2 {
  @include margin(18px, null, null, null);

  font-size: $h2-font-size;
}

h3 {
  font-size: $h3-font-size;
}

h4 {
  font-size: $h4-font-size;
}

h5 {
  font-size: $h5-font-size;
}

h6 {
  font-size: $h6-font-size;
}

small {
  font-size: 75%;
}

sub,
sup {
  position: relative;

  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

// Page Container Structure
// --------------------------------------------------

ion-app,
ion-router-outlet,
ion-tab,
ion-tabs,
ion-nav,
.ion-page {
  @include position(0, 0, 0, 0);

  position: absolute;
  z-index: $z-index-page-container;
  overflow: hidden;

  contain: layout size style;
}

ion-app,
.ion-page {
  display: flex;

  flex-direction: column;
  justify-content: space-between;
}

.hide-page {
  opacity: 0;
}

// TODO: move to somewhere else

$navigation-ios-transition-background: #000 !default;

.nav-decor {
  display: none;
}

.show-decor > .nav-decor {
  @include position(0, 0, 0, 0);

  // when ios pages transition, the leaving page grays out
  // this is the black square behind all pages so they gray out
  position: absolute;
  z-index: 0;
  display: block;

  background: $navigation-ios-transition-background;

  pointer-events: none;
}

// Misc
// --------------------------------------------------

ion-route,
ion-route-controller,
ion-animation-controller,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-toast-controller,
[app-viewport],
[overlay-portal],
[nav-viewport],
[tab-portal] {
  display: none;
}


// Text Alignment
// --------------------------------------------------

@if ($include-text-alignment-utilities == true) {
  // Creates text alignment attributes based on screen size
  @each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
      // Provide `[text-{bp}]` attributes for aligning the text based
      // on the breakpoint
      [text#{$infix}-center] {
        @include text-align(center, !important);
      }

      [text#{$infix}-justify] {
        @include text-align(justify, !important);
      }

      [text#{$infix}-start] {
        @include text-align(start, !important);
      }

      [text#{$infix}-end] {
        @include text-align(end, !important);
      }

      [text#{$infix}-left] {
        @include text-align(left, !important);
      }

      [text#{$infix}-right] {
        @include text-align(right, !important);
      }

      [text#{$infix}-nowrap] {
        // scss-lint:disable ImportantRule
        white-space: nowrap !important;
      }

      [text#{$infix}-wrap] {
        // scss-lint:disable ImportantRule
        white-space: normal !important;
      }
    }
  }
}


// Text Transformation
// --------------------------------------------------

@if ($include-text-transform-utilities == true) {
  // Creates text transform attributes based on screen size
  @each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
      // Provide `[text-{bp}]` attributes for transforming the text based
      // on the breakpoint
      [text#{$infix}-uppercase] {
        // scss-lint:disable ImportantRule
        text-transform: uppercase !important;
      }

      [text#{$infix}-lowercase] {
        // scss-lint:disable ImportantRule
        text-transform: lowercase !important;
      }

      [text#{$infix}-capitalize] {
        // scss-lint:disable ImportantRule
        text-transform: capitalize !important;
      }
    }
  }
}


// Float Elements
// --------------------------------------------------

@if ($include-float-element-utilities == true) {
  // Creates text transform attributes based on screen size
  @each $breakpoint in map-keys($screen-breakpoints) {
    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);

    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
      // Provide `[float-{bp}]` attributes for floating the element based
      // on the breakpoint
      [float#{$infix}-left] {
        @include float(left, !important);
      }

      [float#{$infix}-right] {
        @include float(right, !important);
      }

      [float#{$infix}-start] {
        @include float(start, !important);
      }

      [float#{$infix}-end] {
        @include float(end, !important);
      }
    }
  }
}



ion-app [no-padding],
ion-app [no-padding] .scroll-inner {
  @include padding(0);
}

@mixin app-padding($mode, $content-padding) {
  .app-#{$mode} [padding],
  .app-#{$mode} [padding] .scroll-inner {
    @include padding($content-padding);
  }

  .app-#{$mode} [padding-top],
  .app-#{$mode} [padding-top] .scroll-inner {
    @include padding($content-padding, null, null, null);
  }

  .app-#{$mode} [padding-left],
  .app-#{$mode} [padding-left] .scroll-inner {
    @include padding-horizontal($content-padding, null);
  }

  .app-#{$mode} [padding-right],
  .app-#{$mode} [padding-right] .scroll-inner {
    @include padding-horizontal(null, $content-padding);
  }

  .app-#{$mode} [padding-bottom],
  .app-#{$mode} [padding-bottom] .scroll-inner {
    @include padding(null, null, $content-padding, null);
  }

  .app-#{$mode} [padding-vertical],
  .app-#{$mode} [padding-vertical] .scroll-inner {
    @include padding($content-padding, null, $content-padding, null);
  }

  .app-#{$mode} [padding-horizontal],
  .app-#{$mode} [padding-horizontal] .scroll-inner {
    @include padding-horizontal($content-padding);
  }
}


// Content Margin
// --------------------------------------------------

ion-app [no-margin],
ion-app [no-margin] ion-scroll {
  @include margin(0);
}

@mixin app-margin($mode, $content-margin) {
  .app-#{$mode} [margin],
  .app-#{$mode} [margin] .scroll-inner {
    @include margin($content-margin);
  }

  .app-#{$mode} [margin-top],
  .app-#{$mode} [margin-top] .scroll-inner {
    @include margin($content-margin, null, null, null);
  }

  .app-#{$mode} [margin-left],
  .app-#{$mode} [margin-left] .scroll-inner {
    // scss-lint:disable PropertySpelling
    margin-left: $content-margin;
  }

  .app-#{$mode} [margin-start],
  .app-#{$mode} [margin-start] .scroll-inner {
    @include margin-horizontal($content-margin, null);
  }

  .app-#{$mode} [margin-right],
  .app-#{$mode} [margin-right] .scroll-inner {
    // scss-lint:disable PropertySpelling
    margin-right: $content-margin;
  }

  .app-#{$mode} [margin-end],
  .app-#{$mode} [margin-end] .scroll-inner {
    @include margin-horizontal(null, $content-margin);
  }

  .app-#{$mode} [margin-bottom],
  .app-#{$mode} [margin-bottom] .scroll-inner {
    @include margin(null, null, $content-margin, null);
  }

  .app-#{$mode} [margin-vertical],
  .app-#{$mode} [margin-vertical] .scroll-inner {
    @include margin($content-margin, null, $content-margin, null);
  }

  .app-#{$mode} [margin-horizontal],
  .app-#{$mode} [margin-horizontal] .scroll-inner {
    @include margin-horizontal($content-margin);
  }
}
